<!-- 问卷调查 -->
<template>
	<view class="content">
		<u-navbar leftIcon="" leftIconSize="0px" :border-bottom="none">
			<slot>
				<image src="https://cdn.zkjialan.com/img1/logo.png" class="logo"></image>
			</slot>
		</u-navbar>
		<block v-if="isResult==0">
			<view class="guideBox" v-if="isGuide==0">
				<image :src="baseUrl+'guide.jpg'" class="guideImg" />
				</image>
				<view class="start" v-if="userId" @click="start">
					开始评估
				</view>
				<router-link v-else class="start" to="/pages/login/login">
					<view class="start">
						开始评估
					</view>
				</router-link>
			</view>
			<block v-else>
				<view class="progressBarBox">
					<view class="outBar">
						<view class="innerBar" :style="{ width: innerBarWidth+'%'}">
						</view>
					</view>
					<view class="numBarBox">
						<text class="progressNum">{{list+1}}</text>
						<text class="totalNum">/14</text>
					</view>
				</view>
				<!-- 问题 -->
				<view class="questionnaireBox">
					<!-- 第一题 性别-->
					<view class="questionBox" v-if="list==0">
						<text class="questionTitle">{{title[0]}}？</text>
						<view class="sexBox">
							<view class="womanBox" @click="select(list,0)">
								<image :src="baseUrl+'woman.png'" class="avatar"
									:class="questionIndex[list].ind==0?'avatarActive':''" />
								</image>
								<text class="sexLabel" :class="questionIndex[list].ind==0?'sexLabelActive':''">女</text>
							</view>
							<view class="manBox" @click="select(list,1)">
								<image :src="baseUrl+'man.png'" class="avatar"
									:class="questionIndex[list].ind==1?'avatarActive':''" />
								</image>
								<text class="sexLabel" :class="questionIndex[list].ind==1?'sexLabelActive':''">男</text>
							</view>
						</view>
					</view>
					<!-- 第二题 年龄-->
					<view class="questionBox" v-else-if="list==1">
						<text class="questionTitle">{{title[1]}}？</text>
						<view class="slectBox">
							<block v-for="(item,index) in question[list]" :key="index">
								<view class="slectItem" :class="questionIndex[list].ind==index?'slectItemActive':''"
									@click="select(list,index)">{{item}}
								</view>
							</block>
						</view>
					</view>
					<!-- 第三题 体重-->
					<view class="questionBox" v-else-if="list==2">
						<text class="questionTitle">{{title[2]}}？</text>
						<text class="questionTitleLabel">单位kg,如：体重120斤，请填60kg</text>
						<view class="weightBox">
							<input type="number" @input="onInput" class="weightInput" maxlength="5"
								v-model="result[list].value" />
							<text class="kg">kg</text>
						</view>
					</view>
					<!-- 第四题 身高-->
					<view class="questionBox" v-else-if="list==3">
						<text class="questionTitle">{{title[3]}}？</text>
						<text class="questionTitleLabel">单位cm,如：身高1米75，请填175cm</text>
						<view class="heightBox">
							<input type="number" @input="onInput" class="heightInput" maxlength="3"
								v-model="result[list].value" />
							<text class="kg">cm</text>
						</view>
					</view>
					<!-- 第五题 城市-->
					<view class="questionBox" v-else-if="list==4">
						<text class="questionTitle">{{title[4]}}?</text>
						<view class="cityBox" @click="showRegion = true">
							<!-- 地址选择 -->
							<input name="region" class="cityInput" v-model="result[list].value" disabled type="text"
								placeholder="请选择省、市、区"></input>
							<u-picker v-model="showRegion" :confirm-color="themeColor" cancel-color="#999" mode="region"
								@confirm="regionChange">
							</u-picker>
						</view>
					</view>
					<!-- 第六题 饮酒-->
					<view class="questionBox" v-else-if="list==5">
						<text class="questionTitle">{{title[5]}}?</text>
						<text class="questionTitleLabel">1两白酒=1份酒精</text>
						<view class="slectBox">
							<block v-for="(item,index) in question[list]" :key="index">
								<view class="slectItem" :class="questionIndex[list].ind==index?'slectItemActive':''"
									@click="select(list,index)">{{item}}
								</view>
							</block>
						</view>
					</view>

					<!-- 第七题 大便-->
					<view class="questionBox" v-else-if="list==6">
						<text class="questionTitle">{{title[6]}}?</text>
						<view class="slectBox">
							<block v-for="(item,index) in question[list]" :key="index">
								<view class="slectItem" :class="questionIndex[list].ind==index?'slectItemActive':''"
									@click="select(list,index)">{{item}}
								</view>
							</block>
						</view>
					</view>
					<!-- 第八题 运动-->
					<view class="questionBox" v-else-if="list==7">
						<text class="questionTitle">{{title[7]}}?</text>
						<view class="slectBox">
							<block v-for="(item,index) in question[list]" :key="index">
								<view class="slectItem" :class="questionIndex[list].ind==index?'slectItemActive':''"
									@click="select(list,index)">{{item}}
								</view>
							</block>
						</view>
					</view>

					<!-- 第九题 睡眠-->
					<view class="questionBox" v-else-if="list==8">
						<text class="questionTitle">{{title[8]}}?</text>
						<view class="slectBox">
							<block v-for="(item,index) in question[list]" :key="index">
								<view class="slectItem" :class="questionIndex[list].ind==index?'slectItemActive':''"
									@click="select(list,index)">{{item}}
								</view>
							</block>
						</view>
					</view>
					<!-- 第九题 晨起-->
					<view class="questionBox" v-else-if="list==9">
						<text class="questionTitle">{{title[9]}}?</text>
						<text class="questionTitleLabel">跑步，快走，骑单车，游泳等</text>
						<view class="slectBox">
							<block v-for="(item,index) in question[list]" :key="index">
								<view class="slectItem" :class="questionIndex[list].ind==index?'slectItemActive':''"
									@click="select(list,index)">{{item}}
								</view>
							</block>
						</view>
					</view>
					<!-- 第十题 运动-->
					<view class="questionBox" v-else-if="list==10">
						<text class="questionTitle">{{title[10]}}?</text>
						<view class="slectBox">
							<block v-for="(item,index) in question[list]" :key="index">
								<view class="slectItem" :class="questionIndex[list].ind==index?'slectItemActive':''"
									@click="select(list,index)">{{item}}
								</view>
							</block>
						</view>
					</view>
					<!-- 第11题 抽烟-->
					<view class="questionBox" v-else-if="list==11">
						<text class="questionTitle">{{title[11]}}?</text>
						<view class="slectBox">
							<block v-for="(item,index) in question[list]" :key="index">
								<view class="slectItem" :class="questionIndex[list].ind==index?'slectItemActive':''"
									@click="select(list,index)">{{item}}
								</view>
							</block>
						</view>
					</view>
					<!-- 第12题 精力-->
					<view class="questionBox" v-else-if="list==12">
						<text class="questionTitle">{{title[12]}}?</text>
						<text class="questionTitleLabel">（多选）</text>
						<view class="slectBox">
							<block v-for="(item,index) in question[list]" :key="index">
								<view class="slectItem" :class="multiArr.includes(item)?'slectItemActive':''"
									@click="multiSelect(list,index)">{{item}}
								</view>
							</block>
						</view>
					</view>
					<!-- 第13题 改善-->
					<view class="questionBox" v-else-if="list==13">
						<text class="questionTitle">{{title[13]}}?</text>
						<textarea v-model="result[list].value" placeholder="填写健康问题:" class="textareaBox" />
					</view>
					<!-- 开始评测 -->
					<view class="nextBox" v-if="list==13" @click="handleNext()">
						开始评测
					</view>
					<!-- 下一题按钮 -->
					<view class="nextBox" v-if="list==2 || list==3 || list==4 || list==12" @click="handleNext()">
						下一题
					</view>
					<!-- 上一题按钮 -->
					<view class="prevBox" v-if="list!=0" @click="prevQue()">
						上一题
					</view>
				</view>
			</block>
		</block>
		<scroll-view class="resultBox" v-if="isResult==1" scroll-y="true" @scroll="scroll">
			<!-- <image :src="baseUrl+'resultbg.jpg'" class="resultbgImg" /> -->
			</image>
			<view class="bmiBox">
				<text class="bmiLabel">体脂率(BMI) : </text>
				<u-count-to :startVal="0" :endVal="testResult.exponent" :decimals="2" class="bmiNum"></u-count-to>
				<text class="bmiDes">{{testResult.bmi_grade_name}}</text>
			</view>
			<text class="standard_weight">身高标准体重：{{testResult.standard_weight}}</text>
			<image :src="baseUrl+'man1.png'" class="portrait"
				v-if="testResult.sex=='男'&&testResult.bmi_grade_name=='偏瘦'"></image>
			<image :src="baseUrl+'man2.png'" class="portrait"
				v-else-if="testResult.sex=='男'&&testResult.bmi_grade_name=='正常'"></image>
			<image :src="baseUrl+'man3.png'" class="portrait"
				v-else-if="testResult.sex=='男'&&testResult.bmi_grade_name=='偏胖'"></image>
			<image :src="baseUrl+'man4.png'" class="portrait"
				v-else-if="testResult.sex=='男'&&testResult.bmi_grade_name=='肥胖'"></image>
			<image :src="baseUrl+'man5.png'" class="portrait"
				v-else-if="testResult.sex=='男'&&testResult.bmi_grade_name=='重度肥胖'"></image>
			<image :src="baseUrl+'woman1.png'" class="portrait"
				v-else-if="testResult.sex=='女'&&testResult.bmi_grade_name=='偏瘦'"></image>
			<image :src="baseUrl+'woman2.png'" class="portrait"
				v-else-if="testResult.sex=='女'&&testResult.bmi_grade_name=='正常'"></image>
			<image :src="baseUrl+'woman3.png'" class="portrait"
				v-else-if="testResult.sex=='女'&&testResult.bmi_grade_name=='偏胖'"></image>
			<image :src="baseUrl+'woman4.png'" class="portrait"
				v-else-if="testResult.sex=='女'&&testResult.bmi_grade_name=='肥胖'"></image>
			<image :src="baseUrl+'woman5.png'" class="portrait"
				v-else-if="testResult.sex=='女'&&testResult.bmi_grade_name=='重度肥胖'"></image>
			<view class="resultText1">
				{{testResult.bmi_grade_content}}
			</view>
			<view class="immuneBox">
				<text class="immuneLabel">免疫指标 : </text>
				<u-count-to ref="uCountTo" autoplay="false" :startVal="0" :endVal="testResult.immune" class="immuneNum"
					v-show="isImmuneDesAni==1"></u-count-to>
				<text class="immuneDes" :class="isImmuneDesAni==1?'immuneDesAni':''"
					v-if="isImmuneDesAni==1">{{testResult.immune_grade_name}}</text>
			</view>
			<!-- <view class="pointerBox">
				<image :src="baseUrl+'pointer1.png'" v-show="isPointerAni==1&&testResult.immune_grade_name=='免疫良好'"
					class="pointer" :class="isPointerAni==1?'rotate1':''" />
				<image :src="baseUrl+'pointer2.png'" v-show="isPointerAni==1&&testResult.immune_grade_name=='免疫偏弱'"
					class="pointer" :class="isPointerAni==1?'rotate2':''" />
				<image :src="baseUrl+'pointer3.png'" v-show="isPointerAni==1&&testResult.immune_grade_name=='免疫预警'"
					class="pointer" :class="isPointerAni==1?'rotate3':''" />
				<image :src="baseUrl+'pointer4.png'" v-show="isPointerAni==1&&testResult.immune_grade_name=='免疫受损'"
					class="pointer" :class="isPointerAni==1?'rotate4':''" />
				<image :src="baseUrl+'pointer5.png'" v-show="isPointerAni==1&&testResult.immune_grade_name=='免疫严重受损'"
					class="pointer" :class="isPointerAni==1?'rotate5':''" />
			</view> -->
			<view class="pointerBox">
				<image :src="baseUrl+'pointer1.png'" v-show="isPointerAni==1&&testResult.immune_grade_name=='免疫良好'"
					class="pointer" :class="isPointerAni==1?'rotate1':''" />
				<image :src="baseUrl+'pointer2.png'" v-show="isPointerAni==1&&testResult.immune_grade_name=='免疫偏弱'"
					class="pointer" :class="isPointerAni==1?'rotate2':''" />
				<image :src="baseUrl+'pointer3.png'" v-show="isPointerAni==1&&testResult.immune_grade_name=='免疫预警'"
					class="pointer" :class="isPointerAni==1?'rotate3':''" />
				<image :src="baseUrl+'pointer4.png'" v-show="isPointerAni==1&&testResult.immune_grade_name=='免疫受损'"
					class="pointer" :class="isPointerAni==1?'rotate4':''" />
				<image :src="baseUrl+'pointer5.png'" v-show="isPointerAni==1&&testResult.immune_grade_name=='免疫严重受损'"
					class="pointer" :class="isPointerAni==1?'rotate5':''" />
			</view>
			<view class="suggestBox">
				<view class="resultText2">
					{{testResult.immune_grade_content}}
				</view>
				<image :src="baseUrl+'Jianyi.png'" class="Jianyi" />
				<!-- <u-parse :html="goodsInfo.content" :show-with-animation="true"></u-parse> -->
				<u-parse :html="testResult.immune_grade_suggest" class="resultText3"></u-parse>
			</view>
			<view class="btnBox">
				<view class="homeBtn" @click="$switchTab('/pages/index/index')">
					进入首页
				</view>
				<view class="liveingBtn" @click="isTips=!isTips">
					0元领取CHO健康真相公开课
				</view>
			</view>
		</scroll-view>
		<view class="loadingBox" v-if="isResult==2">
			<text class="loadingText">问卷结果生成中</text>
			<view class="loadingOutBar">
				<view class="loadingInnerBar" :style="{ width: LoadingBarWidth+'%'}">
				</view>
			</view>
			<text class="loadingPercent">{{loadingPercent}}%</text>
		</view>
		<view class="isTips" v-if="isTips">
			<image :src="baseUrl+'success.png?v=1.1'" class="success"
				@click="$navto.navto('course/info/info',{id:22})" />
			<image :src="baseUrl+'close.png'" class="close" @click="isTips=!isTips" />
		</view>
		<tabbar />
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	import {
		apiQuestionnaire
	} from "@/api/app";
	import Cache from "@/utils/cache";
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import {
		INVITE_CODE
	} from '@/config/cachekey'
	export default {
		data() {
			return {
				baseUrl: `https://cdn.zkjialan.com/img/questionnaire/`,
				isGuide: 0, //指引
				isResult: 0, //结果
				list: 0, //题目序号
				questionIndex: [],
				innerBarWidth: 0,
				LoadingBarWidth: 0,
				loadingPercent: 0,
				title: ['您的性别', '您的年龄', '您的体重', '您的身高', '您所在的城市', '每周饮酒多少', '日常大便频率', '您的睡眠情况', '晨起精神状态', '每周有氧运动几次跑步',
					'是否抽烟', '白天精力情况', '想要得到什么健康服务', '想要改善哪方面的健康问题'
				],
				question: [
					['女', '男'],
					['小于18岁', '18-24岁', '25-29岁', '30-39岁', '40-49岁', '50-65岁', '65岁以上'],
					[],
					[],
					[],
					['完全不喝酒', '≤3份酒精', '4-6份酒精', '6-10份的酒精', '10份以上的酒精'],
					['每天1次', '每天2次', '两天1次', '三天1次', '没有我的情况'],
					['入睡容易', '睡眠较浅', '入睡困难', '半夜易醒', '晚睡早醒'],
					['精神充沛', '仍觉得有些疲惫', '觉得很累，没有精神'],
					['每周5次', '每周3次', '每周2次', '每周1次', '基本不运动'],
					['不抽烟', '每天＜10支', '每天11支-20支', '每天1包', '每天2包及以上'],
					['头胀头昏', '注意力不集中', '食欲不佳', '容易疲劳', '以上情况都没有'],
					['咨询营养素', '领取营养食谱', '学习老师课程', '学习健康知识', '咨询训练营', '个案定制调理', '寻求合作机会'],
				],
				score: [
					[0],
					[0],
					[0],
					[0],
					[0],
					[5, 4, 3, 2, 1],
					[5, 4, 3, 2, 1],
					[5, 4, 2, 3, 1],
					[5, 3, 1],
					[5, 4, 3, 2, 1],
					[5, 4, 3, 2, 1],
					[4, 2, 1, 3, 5],
					[0],
					[0],
				],
				weight: '', //用户体重
				result: Array.from({
					length: 14
				}, () => ({
					value: "",
					index: ""
				})), //选择的答案
				showRegion: false, //显示地区选择的flag
				multiArr: [], //多选题
				canSelect: true, //防止连点
				testResult: '',
				isImmuneDesAni: 1,
				isPointerAni: 1,
				userId: '',
				id: '',
				isTips: false,
				sharImage: ''
			}
		},
		onLoad() {
			this.$request.get(`shopapi/home/slideshow_list?type=14`).then(res => {
				console.log(res.data.data.lists[0].img_url)
				this.sharImage = res.data.data.lists[0].img_url;
			})
			if (uni.getLaunchOptionsSync().scene) { //来源场景
				Cache.set('scene', uni.getLaunchOptionsSync().scene)
			}
			if (uni.getLaunchOptionsSync().query.invite_code) { //获取邀请码
				Cache.set(INVITE_CODE, uni.getLaunchOptionsSync().query.invite_code)
			}
		},
		onShow() {
			if (uni.getStorageSync('store_userId')) {
				this.userId = JSON.parse(uni.getStorageSync('store_userId')).value;
			}
			let pagearr = getCurrentPages(); //获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
			this.id = currentPage.options.id;
			if (currentPage.options.id > 1) {
				//查询问卷
				this.$request.get(`shopapi/Questionnaire/user_read_questionnaire?id=${currentPage.options.id}`).then(
					res => {
						console.log(res.data);
						if (res.data.code == 0) {
							this.$toast({
								title: res.data.msg
							});
						} else { //
							this.isResult = 1;
							this.testResult = res.data.data;
							uni.hideLoading();
						}
					})
			} else if (currentPage.options.id == 0) {
				this.isGuide = 0;
			}
			console.log(this.isLogin);
			this.handleInnerBarWidth();
			for (let i = 0; i < 14; i++) {
				let obj = {
					index: -1
				}
				this.questionIndex.push(obj);
			}

		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onShareAppMessage() {
			const {
				code
			} = this.userInfo
			const share = {
				title: '邀请参与“健康免疫评测”！',
				path: `/pages/questionnaire/questionnaire?invite_code=${this.userInfo.code}`,
				imageUrl: this.sharImage
			}
			return share
		},
		methods: {
			custer() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: "https://work.weixin.qq.com/ca/cawcde964ed429b7ec"
					},
					corpId: "ww64696a3c34f36304",
					fail(res) {
						console.log(res)
					}
				});
			},
			onInput(e) {
				console.log(e);
				const inputValue = e.detail.value;
				const regExp = /^[0-9.]*$/; // 只能输入数字和小数点
				if (!regExp.test(inputValue)) {
					this.$nextTick(() => {
						this.result[this.list].value = ''; // 删除最后一个非法字符
					})
				}
			},
			startCount() {
				this.$refs.uCountTo.start();
			},
			scroll(e) {
				console.log(e.detail.scrollTop);
				let distance = e.detail.scrollTop;
				if (distance >= 400) {
					if (this.isImmuneDesAni == 0) {
						this.startCount();
						this.isImmuneDesAni = 1;
					}
				}
				if (distance >= 700) {
					this.isPointerAni = 1;
				}
			},
			multiSelect(queNum, ansNum) { //多选
				// this.multiArr.push(this.question[queNum][ansNum]);
				if (this.multiArr.includes(this.question[queNum][ansNum])) {
					this.multiArr = this.multiArr.filter(item => item !== this.question[queNum][ansNum]); // 移除数组中的元素
				} else {
					this.multiArr.push(this.question[queNum][ansNum]); // 向数组中添加元素
				}
			},
			// 地区选择，选择当前省市区的ID
			regionChange(region) {
				const {
					city,
					province,
					area
				} = region
				this.result[this.list].value = province.label + "," + city.label + "," + area.label
			},
			select(queNum, ansNum) { //选择答案 第一个参数为题目序号，第二个参数为选项序号 结果变了 但是appData里面没显示
				//防止连点
				if (!this.canSelect) {
					return;
				}
				this.canSelect = false;
				console.log("题目序号" + parseInt(this.list) + 1);
				let list = this.list;
				this.questionIndex[list].ind = ansNum; //改变选中状态选择的第几个
				this.result[list].index = this.score[list][ansNum]; //改变选中状态选择的第几个
				this.result[list].value = this.question[list][ansNum];
				console.log(this.result);
				this.nextQue();
			},
			prevQue() {
				this.list--;
				this.handleInnerBarWidth();
			},
			handleNext() { //点击下一题  判断是第几题，处理答案
				if (this.list == 2 && this.result[2].value == '') {
					this.$toast({
						title: "请填写您的体重",
					});
					return;
				}
				if (this.list == 3 && this.result[3].value == '') {
					this.$toast({
						title: "请填写您的身高",
					});
					return;
				}
				if (this.list == 4 && this.result[4].value == '') {
					this.$toast({
						title: "请选择您所在的城市",
					});
					return;
				}
				if (this.list == 13) { //开始评测 组合提交数据
					console.log(this.result)
					// if (this.result[13].value == '') {//13题不是必填
					// 	this.$toast({
					// 		title: "请填写健康问题",
					// 	});
					// 	return;
					// }
					let submitResult = {
						bmi_arr: [],
						immune_arr: [],
						sundry_arr: [],
					}
					for (let i = 0; i < this.result.length; i++) {
						if (i == 2 || i == 3) { //身高 体重
							let obj = {
								que_name: this.title[i],
								que_data: this.result[i].value
							}
							submitResult.bmi_arr.push(obj);
						} else if (i == 0 || i == 1 || i == 4 || i == 12 || i == 13) { //性别 年龄 城市  问题
							let obj = {
								que_name: this.title[i],
								que_data: this.result[i].value,
							}
							submitResult.sundry_arr.push(obj);
						} else if (5 <= i <= 11) {
							let obj = {
								que_name: this.title[i],
								que_data: this.result[i].value,
								que_num: this.result[i].index
							}
							submitResult.immune_arr.push(obj);
						}
					}
					console.log(submitResult);
					// return;
					this.$request.post('shopapi/Questionnaire/user_questionnaire', {
						user_id: this.userId,
						questionnaire_arr: JSON.stringify(submitResult)
					}).then(res => {
						console.log(res.data);
						if (res.data.code == 0) {
							this.$toast({
								title: res.data.msg
							});
						} else { //请求结果
							let id = res.data.msg;
							this.$request.get(
								`shopapi/Questionnaire/user_read_questionnaire?id=${id}`).then(
								res => {
									console.log(res.data);
									if (res.data.code == 0) {
										this.$toast({
											title: res.data.msg
										});
									} else { //先显示过渡界面
										this.isResult = 2;
										let timer;
										timer = setInterval(() => {
											if (this.loadingPercent < 100) {
												this.loadingPercent++;
												this.LoadingBarWidth++;
											} else {
												clearInterval(timer);
												this.isResult = 1;
												this.testResult = res.data.data;
											}
										}, 50);
									}
								})
						}
					})
				} else {
					console.log("序号加1");
					if (this.list == 12) { //多选题
						if (this.multiArr.length == 0) { //未选择
							this.$toast({
								title: "请至少选择一项",
							});
							return;
						}
						this.result[12].value = this.multiArr;
					}
					this.list++;
					this.handleInnerBarWidth();
				}
			},
			nextQue() { //自动下一题
				setTimeout(() => {
					console.log("序号加1");
					this.list++;
					this.handleInnerBarWidth();
					this.canSelect = true;
				}, 1000)
			},
			// 计算进度条
			handleInnerBarWidth() {
				this.innerBarWidth = parseInt((this.list + 1) / 14 * 100);
			},
			start() { //判断是否填写过问卷
				this.isGuide = 1;
				// console.log(this.userId);
				// this.$request.get(`shopapi/user/get_user_is_questionnaire?user_id=${this.userId}`).then(res => {
				// 	if (res.data.data.is_questionnaire == 1) {
				// 		this.$toast({
				// 			title: '您已评估，即将返回首页'
				// 		})
				// 		setTimeout(() => {
				// 			uni.switchTab({
				// 				url: '/pages/index/index'
				// 			});
				// 		}, 1000);
				// 	} else {
				// 		this.isGuide = 0;
				// 	};
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.isTips {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 999;

		.success {
			width: 500rpx;
			height: 620rpx;
		}

		.close {
			margin-top: 20rpx;
			width: 100rpx;
			height: 100rpx;
		}
	}

	.loadingBox {
		width: 100%;
		height: 100%;
		background: url('https://cdn.zkjialan.com/questionnaire/loadingBg.jpg');
		background-size: 100% 100%;
		position: fixed;
		top: 0;

		.loadingPercent {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			margin-top: 35rpx;
			display: block;
		}

		.loadingInnerBar {
			position: absolute;
			// width: 300rpx;
			height: 10rpx;
			background-color: #f08329;
			border-radius: 5rpx;
			left: 0;
			top: 0;
		}

		.loadingOutBar {
			position: relative;
			width: 300rpx;
			height: 10rpx;
			background-color: #e4e4e4;
			border-radius: 5rpx;
			margin-top: 60rpx;
			margin-left: 225rpx;
		}

		.loadingText {
			width: 100%;
			text-align: center;
			font-size: 34rpx;
			margin-top: 610rpx;
			position: relative;
			display: block;
			font-family: 'ab';
		}
	}

	/deep/ .u-navbar {
		background-color: transparent !important;
	}

	/deep/ .u-icon__icon {
		color: #000000 !important;
	}

	.resultBox {
		// position: absolute;
		// width: 100%;
		// height: 3000rpx;
		// overflow-y: scroll;
		// top: 0;
		// left: 0;
		position: absolute;
		width: 100%;
		overflow-y: scroll;
		top: 0;
		left: 0;
		background: url('https://cdn.zkjialan.com/img/questionnaire/resultbg.jpg');
		background-size: 100% auto;
		padding-bottom: 200rpx;

		.btnBox {
			position: fixed;
			width: 674rpx;
			height: 90rpx;
			bottom: 75rpx;
			margin-left: 38rpx;
			display: flex;
			justify-content: space-around;
			z-index: 2;

			.homeBtn {
				width: 210rpx;
				height: 90rpx;
				font-size: 28rpx;
				color: #ffffff;
				border-radius: 45rpx;
				background-color: #f08329;
				text-align: center;
				line-height: 90rpx;
				font-family: 'am';
			}

			.liveingBtn {
				width: 430rpx;
				height: 90rpx;
				font-size: 28rpx;
				font-family: 'am';
				color: #ffffff;
				border-radius: 45rpx;
				background-color: #ef5834;
				text-align: center;
				line-height: 90rpx;
			}
		}

		.suggestBox {
			position: relative;
			z-index: 1;
			width: 710rpx;
			margin-top: 310rpx;
			margin-left: 20rpx;
			overflow-y: scroll;
			padding: 55rpx;
			background-color: #ffffff;
			border-radius: 15rpx;

			.resultText3 {
				position: relative;
				z-index: 1;
				width: 100%;
				margin-top: 10rpx;
				font-family: 'ar';
				font-size: 24rpx;
				letter-spacing: 5rpx;
				line-height: 48rpx;
				font-weight: 500;
			}

			.Jianyi {
				width: 600rpx;
				height: 58rpx;
				margin-top: 20rpx;
			}

			.resultText2 {
				position: relative;
				z-index: 1;
				width: 600rpx;
				font-family: 'ar';
				font-size: 24rpx;
				overflow-y: scroll;
				text-align: justify;
				letter-spacing: 5rpx;
				line-height: 48rpx;
				font-weight: 500;
			}
		}

		.pointerBox {
			position: relative;
			z-index: 1;
			width: 202rpx;
			height: 329rpx;
			margin-left: 200rpx;
			margin-top: 290rpx;
		}

		.pointer {
			width: 100%;
			height: 100%;
		}

		.immuneBox {
			position: relative;
			width: 676rpx;
			margin-left: 37rpx;
			margin-top: 200rpx;
			z-index: 1;

			.immuneLabel {
				font-size: 36rpx;
				display: inline-block;
				font-family: 'am';
			}

			.immuneNum {
				font-size: 50rpx;
				font-family: 'am';
				display: inline-block;
				color: #3682c3;
				font-weight: 500;
			}

			/deep/.u-count-num {
				font-size: 50rpx !important;
				display: inline-block;
				color: #3682c3 !important;
				font-weight: 500 !important;
			}

			.immuneDes {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 42rpx;
				display: block;
				color: #3682c3;
				font-weight: 500;
				font-family: 'am';
			}
		}

		.resultText1 {
			position: relative;
			z-index: 1;
			width: 600rpx;
			height: 300rpx;
			// background-color: red;
			font-size: 24rpx;
			margin-top: 200rpx;
			margin-left: 75rpx;
			overflow-y: scroll;
			text-align: justify;
			letter-spacing: 5rpx;
			line-height: 48rpx;
			font-weight: 500;
			font-family: 'ar';
		}



		.portrait {
			width: 391rpx;
			height: 670rpx;
			margin-top: 115rpx;
			margin-left: 80rpx;
			z-index: 1;
			position: relative;
		}

		.standard_weight {
			margin-left: 37rpx;
			color: #929393;
			font-size: 24rpx;
			margin-top: 0rpx;
			display: block;
			position: relative;
			z-index: 1;
			font-family: 'ar';
		}

		.bmiBox {
			position: relative;
			width: 676rpx;
			margin-left: 37rpx;
			margin-top: 436rpx;
			z-index: 1;

			.bmiLabel {
				font-size: 36rpx;
				font-family: 'am';
				display: inline-block;
			}

			/deep/.u-count-num {
				font-size: 48rpx !important;
				display: inline-block;
				color: #f08329 !important;
				font-weight: 500 !important;
			}

			.bmiNum {
				font-family: 'am';
				font-size: 50rpx !important;
				display: inline-block;
				color: #f08329 !important;
				font-weight: 500 !important;
			}

			.bmiDes {
				font-family: 'am';
				position: absolute;
				right: 0;
				top: 0;
				font-size: 42rpx;
				display: block;
				color: #f08329;
				font-weight: 500;
				animation: fadeIn 1s 1s linear both;
			}

		}

		.resultbgImg {
			position: absolute;
			width: 100%;
			height: 4489rpx;
			left: 0;
			top: 0;
		}
	}

	.questionnaireBox {
		width: 100%;
		margin-top: 112rpx;

		.textareaBox {
			width: 584rpx;
			height: 342rpx;
			background-color: #f6f6f6;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-top: 80rpx;
			padding: 20rpx;
			font-size: 24rpx;
			letter-spacing: 2rpx;
			font-family: 'ar';
		}

		.cityBox {
			position: relative;
			width: 482rpx;
			height: 82rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			border-radius: 41rpx;
			background-color: #f6f6f6;

			.cityInput {
				width: 100%;
				height: 100%;
				line-height: 82rpx;
				text-align: center;
			}
		}

		.weightBox,
		.heightBox {
			position: relative;
			width: 482rpx;
			height: 82rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			border-radius: 41rpx;
			background-color: #f6f6f6;

			.weightInput,
			.heightInput {
				width: 100%;
				height: 100%;
				font-size: 27rpx;
				text-align: center;
			}

			.kg {
				position: absolute;
				font-size: 27rpx;
				right: 40rpx;
				top: 26rpx;
			}
		}

		.nextBox {
			width: 387rpx;
			height: 84rpx;
			border-radius: 42rpx;
			background-color: #f08329;
			color: #ffffff;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			margin: 0 auto;
			margin-top: 95rpx;
			margin-bottom: 30rpx;
		}

		.prevBox {
			width: 387rpx;
			height: 84rpx;
			border-radius: 42rpx;
			border: 1rpx solid #000000;
			color: #000000;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			margin: 0 auto;
			font-family: 'ar';
			// margin-top: 95rpx;
		}

		.slectBox {
			width: 427rpx;
			// height: 265rpx;
			margin: 0 auto;
			margin-top: 75rpx;
			margin-bottom: 95rpx;
			display: flex;
			flex-direction: column;

			.slectItem {
				width: 384rpx;
				height: 82rpx;
				line-height: 82rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				background-color: #f6f6f6;
				border-radius: 41rpx;
				text-align: center;
				font-family: 'ar';
			}

			.slectItemActive {
				background-color: #f08329;
				color: #ffffff;
			}
		}

		.sexBox {
			width: 427rpx;
			height: 265rpx;
			margin: 0 auto;
			margin-top: 115rpx;
			display: flex;
			justify-content: space-around;

			.womanBox,
			.manBox {
				width: 184rpx;
				height: 265rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.avatar {
					width: 184rpx;
					height: 184rpx;
					filter: grayscale(100%);
				}

				.avatarActive {
					filter: grayscale(0%);
				}

				.sexLabel {
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					font-weight: 500;
					font-family: 'ar';
				}

				.sexLabelActive {
					color: #f08329;
				}
			}
		}

		.questionTitle {
			width: 100%;
			text-align: center;
			font-size: 38rpx;
			display: block;
			font-weight: 600;
			letter-spacing: 5rpx;
			font-family: 'ab';
		}

		.questionTitleLabel {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			display: block;
			letter-spacing: 5rpx;
			color: #8e8e8e;
			margin-top: 30rpx;
		}
	}

	.progressBarBox {
		width: 100%;
		height: 22rpx;
		margin-top: 60rpx;
		display: flex;
		align-items: center;

		.outBar {
			width: 595rpx;
			height: 10rpx;
			margin-left: 40rpx;
			background-color: #f6f6f6;
			border-radius: 10rpx;

			.innerBar {
				// width: 100%;
				height: 100%;
				background-color: #f08329;
				border-radius: 10rpx;
			}
		}

		.numBarBox {
			display: block;
			margin-left: 30rpx;
			font-size: 24rpx;

			.progressNum {
				color: #f08329;
			}

			.totalNum {
				color: #8e8e8e
			}
		}
	}

	.logo {
		width: 320rpx;
		height: 52rpx;
		// margin: 0 auto;
		margin-left: 40rpx;
	}

	.start {
		width: 482rpx;
		height: 88rpx;
		// margin: 0 auto;
		margin-left: 125rpx;
		background-color: #f08329;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 88rpx;
		text-align: center;
		margin-top: 1211rpx;
		position: relative;
		border-radius: 44rpx;
		font-family: 'am';
	}

	.guideImg {
		position: absolute;
		width: 100%;
		height: 1447rpx;
	}

	.content,
	.guideBox {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
		position: fixed;
		overflow-y: scroll;
	}

	page {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #ffffff;
	}

	.immuneDesAni {
		animation: fadeIn 1s 1s linear both;
	}

	.rotate5 {
		animation: rotate5 1s 0s linear both;
		transform-origin: center right;
	}

	.rotate4 {
		animation: rotate4 1s 0s linear both;
		transform-origin: center right;
	}

	.rotate3 {
		animation: rotate3 1s 0s linear both;
		transform-origin: center right;
	}

	.rotate2 {
		animation: rotate2 1s 0s linear both;
		transform-origin: center right;
	}

	.rotate1 {
		animation: rotate1 1s 0s linear both;
		transform-origin: center right;
	}

	@keyframes rotate5 {
		0% {
			// opacity: 0;
			transform: rotate(-145deg);
		}

		1% {
			opacity: 1;
		}

		100% {
			transform: rotate(0deg);
		}

	}

	@keyframes rotate4 {
		0% {
			// opacity: 0;
			transform: rotate(-112deg);
		}

		1% {
			opacity: 1;
		}

		100% {
			transform: rotate(0deg);
		}

	}

	@keyframes rotate3 {
		0% {
			// opacity: 0;
			transform: rotate(-79deg);
		}

		1% {
			opacity: 1;
		}

		100% {
			transform: rotate(0deg);
		}

	}

	@keyframes rotate2 {
		0% {
			// opacity: 0;
			transform: rotate(-40deg);
		}

		1% {
			opacity: 1;
		}

		100% {
			transform: rotate(0deg);
		}

	}

	@keyframes rotate1 {
		0% {
			// opacity: 0;
			transform: rotate(-13deg);
		}

		1% {
			opacity: 1;
		}

		100% {
			transform: rotate(0deg);
		}

	}

	@keyframes fadeIn {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}
</style>